<div class="footer eui-bar eui-bar-fixed eui-bar-fixed-bottom">
    <div class="eui-bar-tab  eui--white-bacg">
        <a class="eui-tab-item {% if footerActiveIndex === 0 %}active{% endif %}" href="/index">
            <span class="eui-icon eui-icon-home"></span>
            <p class="bottom">{{__("footer_nav_index")}}</p>
        </a> 
        
        <a class="eui-tab-item {% if footerActiveIndex === 1 %}active{% endif %}" href="/product">
            <span class="eui-icon eui-icon-game"></span>
            <p class="bottom">{{__("footer_nav_game")}}</p>
        </a>
        
        <a class="eui-tab-item {% if footerActiveIndex === 2%}active{% endif %}" href="/store">        
            <span class="eui-icon eui-icon-store"></span>
            <p class="bottom">{{__("footer_nav_recharge")}}</p>
        </a>
        
        <a class="eui-tab-item {% if footerActiveIndex === 3%}active{% endif %}" href="/customer">        
            <span class="eui-icon eui-icon-service"></span>
            <p class="bottom">{{__("footer_nav_service")}}</p>
        </a>
    </div>
</div>